$(document).ready(function(){

	//var weatherHeight = $("#homeWeather").outerHeight();
	var sideHeight    = $("#homeSide").outerHeight();
	//var sideWidth     = $("#homeSide").outerWidth();
	//var mapHeight     = sideHeight-weatherHeight;
	// var articleWidth  = $(window).width()-sideWidth-20;
	
	
	computeMapSizeFunc();
	$(window).on("resize", function(){
		computeMapSizeFunc();
	});

	function computeMapSizeFunc(){
		/*var winH = $(window).height();
		var docH = $(document).height()
		var bodH =  $("body>.header").height();
		var innerHeight =  window.innerHeight;
		alert(winH+"   "+bodH + "  "+docH + "  "+ innerHeight);*/
		var mapHeight = window.innerHeight-$("body>.header").height()-10;
		if(mapHeight<500) mapHeight=500;
		if(isPC()==false) {
			mapHeight=mapHeight-400;
		}
		$("#homeMap").css({height:mapHeight});
	};
	
	//$("#homeMap").css({height:sideHeight});
	// $("#homeArticle").css({height:})
});

function isPC() {
    var userAgentInfo = navigator.userAgent;
    var Agents = ["Android", "iPhone",
                "SymbianOS", "Windows Phone",
                "iPod"];//iPad纳入平板电脑范围
    var flag = true;
    for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
            flag = false;
            break;
        }
    }
    return flag;
}
/////////////////////////////START///////////////////////////////////

var markersData = [
           		{
           			id:'1001',
           			type:1,
           			loglat:['114.494855','38.132555'],
           			v1:18,
           			v2:33,
           			v3:66,
           			v4:55
           		},
           		{
           			id:'1002',
           			type:0,
           			loglat:['112.605207','37.298251'],
           			v1:87,
           			v2:77,
           			v3:12,
           			v4:39
           		}
           	];

           	var markersArr = [];
           	var markerIdsObj = {};
           	function createMarkersFunc(){
           		markersArr = [];
           		markerIdsObj = {};
           		map.clearMap();
           		for(var i=0; i<markersData.length; i++) {
           			var markerItem = markersData[i];
           			var contHtml = '';
           			var idStr = markerItem.id;
           			markerIdsObj[idStr] = markerItem;
           			if(markerItem.type == 1) {
           				contHtml+='<div class="marker-point marker-blue" name="markerPoint" data-id="'+idStr+'"></div>';
           			} else {
           				contHtml+='<div class="marker-point marker-orange" name="markerPoint" data-id="'+idStr+'"></div>';
           			}
           			var marker = new AMap.Marker({
           				position: markerItem.loglat,
           				content: contHtml,
           				offset: new AMap.Pixel(-25, -24)
           			});
           			marker.setMap(map);
           			// marker.on('click', function(){
           			// 	showInfoWindowFunc(idStr)
           			// })
           			// markersArr.push(marker)
           		}
           	}

           	//createMarkersFunc();

           	function showInfoWindowFunc(data,position,lightId,map){
           		debugger;
           		map.clearInfoWindow();
           		var html = '';
           			html+='<div class="my-map-info">';
           			html+= '<div class="info-top"><span class="title-text">数据显示</span><a href="javascript:showAllStatus('+lightId+',\''+position.lat+'\',\''+position.lng+'\');" id="showMoreBtn" class="show-more">查看</a></div>';
           			html+=	'<div class="info-cont">';
           			html+=		'<div class="circle"><span class="icon icon-t1"></span><div id="circles-1"></div></div>';
           			html+=		'<div class="circle"><span class="icon icon-t2"></span><div id="circles-2"></div></div>';
           			html+=		'<div class="circle"><span class="icon icon-t3"></span><div id="circles-3"></div></div>';
           			html+=		'<div class="circle"><span class="icon icon-t4"></span><div id="circles-4"></div></div>';
           			html+= 	'</div>';
           			html+='<div class="info-bottom"><img src="https://webapi.amap.com/images/sharp.png"></div>';
           			html+='</div>';

           		var infoWindow = new AMap.InfoWindow({
           			isCustom: true,  //使用自定义窗体
           			content: html,
           			offset: new AMap.Pixel(24, -45)
           		});

           		infoWindow.open(map, position);

           		setTimeout(function(){
           			showMarkerCriclesFunc(data);
           		},500);
           	}
           	

           	/*$(document).on("click", '[name="markerPoint"]', function(){
           		var idStr = $(this).attr('data-id');
           		var itemData = markerIdsObj[idStr]
           		if(typeof itemData !== "undefined") {
           			showInfoWindowFunc(itemData)
           		}
           	});*/

           	function showMarkerCriclesFunc(data){
           		console.log(data);
           		var myCircle1 = Circles.create({
           			id:                  'circles-1',
           			radius:              26,
           			value:               data.v1,
           			maxValue:            100,
           			width:               2,
           			text:                function(value){
           				// return value + '%';
           				return '';
           			},
           			colors:              ['#dbdbdb', '#f5bd25'],
           			duration:            400,
           			wrpClass:            'circles-wrp',
           			textClass:           'circles-text',
           			valueStrokeClass:    'circles-valueStroke',
           			maxValueStrokeClass: 'circles-maxValueStroke',
           			styleWrapper:        true,
           			styleText:           true
           		  });
           		  var myCircle2 = Circles.create({
           			id:                  'circles-2',
           			radius:              26,
           			value:               data.v2,
           			maxValue:            100,
           			width:               2,
           			text:                function(value){
           				// return value + '%';
           				return '';
           			},
           			colors:              ['#dbdbdb', '#20a8ec'],
           			duration:            400,
           			wrpClass:            'circles-wrp',
           			textClass:           'circles-text',
           			valueStrokeClass:    'circles-valueStroke',
           			maxValueStrokeClass: 'circles-maxValueStroke',
           			styleWrapper:        true,
           			styleText:           true
           		  });

           		  var myCircle3 = Circles.create({
           			id:                  'circles-3',
           			radius:              26,
           			value:               data.v3,
           			maxValue:            100,
           			width:               2,
           			text:                function(value){
           				// return value + '%';
           				return '';
           			},
           			colors:              ['#dbdbdb', '#fc4e52'],
           			duration:            400,
           			wrpClass:            'circles-wrp',
           			textClass:           'circles-text',
           			valueStrokeClass:    'circles-valueStroke',
           			maxValueStrokeClass: 'circles-maxValueStroke',
           			styleWrapper:        true,
           			styleText:           true
           		  });
           		  
           		  var myCircle4 = Circles.create({
           			id:                  'circles-4',
           			radius:              26,
           			value:               data.v4,
           			maxValue:            100,
           			width:               2,
           			text:                function(value){
           				// return value + '%';
           				return '';
           			},
           			colors:              ['#dbdbdb', '#92d971'],
           			duration:            400,
           			wrpClass:            'circles-wrp',
           			textClass:           'circles-text',
           			valueStrokeClass:    'circles-valueStroke',
           			maxValueStrokeClass: 'circles-maxValueStroke',
           			styleWrapper:        true,
           			styleText:           true
           		  });
           	}
//////////////////////////END//////////////////////////////////////

function showHomeEchart(onlinecount,faultcount,onlinename,faultname) {
	var chartHomeCount = echarts.init(document.getElementById('chartHomeCount'));
	var chartHomeOption = {
		selectedMode:false,
	    tooltip : {
	        trigger: 'item',
	        formatter: "{a} <br/>{b} : {c} ({d}%)"
	    },
	    legend: {
	        orient : 'vertical',
	        //x : 'left',
	        left:'right',
	        data:[onlinename,faultname]
	    },
	    color:['#00b9cf', '#f36100'],
	    calculable : true,
	    series : [
	        {
	            name:'访问来源',
	            type:'pie',
	            radius : ['50%', '70%'],
	            startAngle:-20,
				avoidLabelOverlap: false,
	            /*itemStyle : {
	                normal : {
	                    label : {
	                        show : false
	                    },
	                    labelLine : {
	                        show : false
	                    }
	                },
	                emphasis : {
	                    label : {
	                        show : true,
	                        position : 'center',
	                        textStyle : {
	                            fontSize : '12',
	                            fontWeight : 'bold'
	                        }
	                    }
	                }
	            },*/
				label: {
					normal: {
						show: false,
						fontSize:'30',
						position: 'center',
						formatter:"{d}%"
					},
					emphasis: {
						show: false,
						formatter:"{d}%",
						textStyle: {
							fontSize: '18',
							// fontWeight: 'bold'
						}
					}
				},
				labelLine: {
					normal: {
						show: false
					}
				},
	            /*data:[
	                {value:onlinecount, name:onlinename},
	                {value:faultcount, name:faultname}
	            ]*/
				data:[
						{
							value:onlinecount, 
							name:onlinename,
							label: {
								normal: {
									show: true,
									fontSize:'18',
									color:'#4bb3fc',
									position: 'center',
									formatter:"{d}%"
								}
							},
							itemStyle:{
								// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
										offset: 0, color: '#4bb3fc' // 0% 处的颜色
									}, {
										offset: 1, color: '#6bebfa' // 100% 处的颜色
									}],
									global: false // 缺省为 false
								}
							}
								
						},
						{
							value:faultcount, 
							name:faultname,
							itemStyle:{
								// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
										offset: 0, color: '#fff333' // 0% 处的颜色
									}, {
										offset: 1, color: '#fb8821' // 100% 处的颜色
									}],
									global: false // 缺省为 false
								}
							}
							
						}
					]
	        }
	    ]
	};
	chartHomeCount.setOption(chartHomeOption);
}
